import React from 'react';
import { Swiper, Image } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import './ModuleBanner.scss'
function ModuleBanner({ data }) {
   let navigate = useNavigate();
   console.log(data);
   const items = data.banners.map((item, index) => (
      <Swiper.Item key={index}>
         <div className='img'>
            <Image src={item.cover}
               width="100%"
               height="30%"
               style={{ borderRadius: 8 }}
               fit="cover"
               lazy={true}
               onClick={() => navigate("/book?id=" + item.id + "&title=" + item.title)}
            ></Image>
         </div>
      </Swiper.Item>
   ))
   return (
      <div className='banner'>
         <Swiper
            indicatorProps={{ color: 'white', }}
            loop={true}
            autoplay={true}
            style={{ '--border-radius': '8px' }}>
            {data && items}
         </Swiper>
      </div>
   );
}

export default ModuleBanner;